{% block sw_settings_media_index %}
<sw-page class="sw-settings-media">

    {% block sw_settings_media_header %}
    <template #smart-bar-header>
        <h2>{{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            /> {{ $tc('sw-settings-media.general.title') }} </h2>
    </template>
    {% endblock %}

    {% block sw_settings_media_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_media_actions_save %}
        <sw-button-process
            class="sw-settings-media__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="isLoading"
            variant="primary"
            @update:process-success="saveFinish"
            @click="onSave"
        >
            {{ $tc('sw-settings-media.general.buttonSave') }}
        </sw-button-process>
            {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_media_content %}
    <template #content>
        <sw-card-view>
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <sw-system-config
                v-show="!isLoading"
                ref="systemConfig"
                domain="core.media"
                @loading-changed="onLoadingChanged"
            >
                <template #card-element-last>
                    <mt-slider
                        v-if="!isLoading"
                        v-model="sliderValue"
                        :label="$tc('sw-settings-media.3d.lightIntensity.label')"
                        :help-text="$tc('sw-settings-media.3d.lightIntensity.helpText')"
                        :min="0"
                        :max="100"
                    />
                </template>
            </sw-system-config>
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
